<template>
  <div class="common-layout">
    <el-container style="height: 100% " direction="vertical" >
      <el-header class="header">
        <div class="swich">
          <el-image style="height: 100%;" src="https://lib.csu.edu.cn/images/logo.png"></el-image>
        </div>
        <div>
          <div v-if="!obj.isLogin">
            <el-button type="primary" text class="login" size="large" @click="router.push('/login')">
              登录
            </el-button>
          </div>
          <div v-else>
            <span class="login"> 
              <el-text class="mx-1" size="large">欢迎您,{{ obj.userinfo.name }},</el-text>
              <el-link
                :underline="false"
                @click="handleLogout"
                type="primary"
                style="font-weight: bold">
                退出
              </el-link>
            </span>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside">
      <el-menu
        default-active="2"
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
        class="menu"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>书籍管理</span>
          </template>
          <el-menu-item-group title="书籍管理">
            <el-menu-item index="/admin/book">书籍管理</el-menu-item>
            <!-- <el-menu-item index="/admin/category">书籍类型</el-menu-item> -->
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>借书还书</span>
          </template>
          <el-menu-item-group title="借书还书">
            <el-menu-item index="/admin/borrow">借书管理</el-menu-item>
            <el-menu-item index="/admin/return">还书管理</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-menu-item index="/admin/userinfo" v-if="obj.userinfo.authority == 2">
          <el-icon><setting /></el-icon>
          <span>借阅证管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/admins" v-if="obj.userinfo.authority == 2">
          <el-icon><setting /></el-icon>
          <span>管理员管理</span>
        </el-menu-item>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>报表管理</span>
          </template>
          <el-menu-item-group title="报表">
            <el-menu-item index="/admin/borrowTable">借阅报表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-menu-item index="/admin/notice">
          <el-icon><setting /></el-icon>
          <span>发布公告</span>
        </el-menu-item>

        <el-menu-item index="/admin/system" v-if="obj.userinfo.authority == 2">
          <el-icon><setting /></el-icon>
          <span>系统管理</span>
        </el-menu-item>
      </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
document.title = "管理员首页 -- 图书管理系统";
import router from "@/router";
import {reactive,onBeforeMount, onMounted} from'vue'
const obj = reactive({
  isLogin : false,
  userinfo : [{
    id : '',
    name : '',
    authority: ''
  }]
})
const data = JSON.parse(sessionStorage.getItem('loginAccount'));
console.log(data);
const slectItem = (index,indexPath,item,routeResult) =>{
  console.log(`index:${index},indexPath:${indexPath},item:${item},routeResult:${routeResult}`);
}

const handleLogout = ()=>{
  window.sessionStorage.removeItem('loginAccount')
  ElMessageBox.alert('成功退出', '提示', {
    // if you want to disable its autofocus
    // autofocus: false,
    type:'success',
    confirmButtonText: 'OK',
    callback: () => {
      router.push('/login')
    },
  })
}

onBeforeMount(() => {
  
  if(data !== null){
    obj.isLogin = true
    obj.userinfo = data
  }


})
</script>

<style scoped>
.common-layout {
  height: 100%;
}
.header {
  color: whitesmoke;
  border-bottom:  1px solid #dcdfe6;
  padding: 0;
  margin: 0;
  /* box-shadow: var(--el-box-shadow-dark); */
}
.aside {
  color: whitesmoke;
  background-color: #0a0a0a;
}
.menu {
  height: 100%;
}
.swich{
  height: 55px;
  float: left;
  margin-left: 10px;
}

.login{
  float: right;
  margin-top: 10px;
  margin-right: 50px;
  font-size: 20px;
  font-weight: bold;
}
</style>
